<template>
    <div class="hello">
      <h1>当前求和为:{{ sum }}</h1>
      <h2>乘以10之后就是:{{bigSum}}</h2>
      <button @click="add">+</button>
      <button @click='addWait'>延迟+</button>
      <button @click="reduce">-</button>
    </div>
  </template>
  
  <script>
    // 在前面的学习中，我们发现我们每次从组件中读取store里的数据时，都要输入this.$store....，每读取一个就要写一次，非常麻烦，vue的开发者鱿鱼须自然也意识到了这一点，所以为我们准备了mapGetters和mapState。那么要怎么使用呢？我们一起来看一看

    import { mapGetters,mapState } from 'vuex'
  export default {
    name: 'P112',
    data(){
      return {
        
      }
    },
    computed:{
      // 注意虽然state很像VueComponent中的data，但是mapState和mapGetters都要写在computed里

      /*
        mapGetters是一个方法，由vue开发团队做出。
        该方法接受一个参数，这个参数可以是一个对象，也可以是一个数组。
          1.如果是一个对象，那么你可以对于getters里的数据进行重命名，比如mapGetters({a:'b'}),就表示把getters中的b重命名为a(别忘了给b加引号，要不然js会把b当做变量去读取)，然后返回出来。就算你不重命名，也要写成{a:'a'}的形式，千万不要搞成简写形式
          2.如果是一个数组，那么就不存在重命名了，必须如实按照getters里的名字写出来，比如mapGetters(['b'])
        该方法的返回值是一个数组，因为mapGetters就是根据你传入的所有名字，去getters里全部拿出来然后组成一个数组，所以我们可以用扩展运算符，直接把返回出来的东西自动注册到computed里即可。

        比如下面这个案例，就是把store中getters里的bigSum拿出来，然后注册到computed里。
        mapState的原理是一样的，所以就不做讲解了
      */

      // 其实说白了，就是vue开发团队帮我们写好了P111里的内容。这样理解就行了
      ...mapGetters(['bigSum']),
      // ...mapGetters({bigSum:'bigSum'})
      ...mapState(['sum'])
      // 怎么样，是不是发现省去了很多代码不用写？
    },
    methods:{
      add(){
        this.$store.commit('ADD',1)
      },
      addWait(){
        this.$store.dispatch('addWait',1)
      },
      reduce(){
        this.$store.commit('REDUCE',1)
      }
    }
  }
  </script>
  